<template>
    <div class="full-width">
      <pagination
        style="position: relative;padding: 20px 20px"
        v-model="pagination.pageNum"
        :page-size="pagination.pageSize"
        :total="pagination.rowsNumber"
        @changePage="onPageChange"
        @changePageSize="onPageSizeChange"
      >
      </pagination>
    </div>
</template>
<script>
import Pagination from 'src/components/pagination/index'
export default {
  name: 'yz-pagination',
  props: {
    value: [Array, String, Object]
  },
  components: {
    Pagination
  },
  data () {
    return {
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      }
    }
  },
  methods: {
    // 切换页码
    onPageChange: function (val) {
      this.pagination.pageNum = val
      this.$emit('onSearch')
    },
    // 切换每夜显示条数
    onPageSizeChange: function (val, page) {
      this.pagination.pageSize = val
      page && (this.pagination.pageNum = page)
      this.$emit('onSearch')
    }
  },
  watch: {
    value: {
      handler (val) {
        this.pagination = val
      },
      deep: true,
      immediate: true
    },
    pagination: {
      deep: true,
      handler () {
        this.$emit('input', this.pagination)
      }
    }
  }
}
</script>
